<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  .content {
    width: 100px;
    height: 300px;
    position: relative;
  }

  .bottom {
    position: absolute;
    z-index: 10;
    bottom: 46%;
    background: #8B4513;
    width: 100%;
    height: 15px;
    border-radius: 10px;
    animation: toBottom 1s linear forwards;
  }

  .top {
    position: absolute;
    z-index: 10;
    top: 46%;
    background: #8B4513;
    width: 100%;
    height: 15px;
    border-radius: 10px;
    animation: toTop 1s linear forwards;
  }

  .bottom-box {
    z-index: 9;
    position: absolute;
    top: 45%;
    height: 15px;
    width: 80%;
    left: 50%;
    margin-left: -40px;
    background: #a00000;
    animation: change 1s linear forwards;
  }

  .top-box {
    z-index: 9;
    position: absolute;
    bottom: 45%;
    left: 50%;
    margin-left: -40px;
    height: 15px;
    width: 80%;
    background: #a00000;
    animation: change 1s linear forwards;
  }


  @keyframes toBottom {
    from {
      bottom: 45%;
    }
    to {
      bottom: 4px;
    }
  }

  @keyframes toTop {
    from {
      top: 45%;
    }
    to {
      top: 4px;
    }
  }

  @keyframes change {
    from {
      height: 15px;
    }
    to {
      height: 150px;
    }
  }

  @keyframes fontChange {
    from{
      opacity: 0;
    }
    to{
      opacity: 1;
    }
  }

  .font {
    font-family: 楷体;
    /*color: white;*/
    text-align: center;
    position: absolute;
    top: 30%;
    left: 38%;
    color: #030303;
    font-weight: bold;
    font-size: 24px;
    z-index: 20;
  }

  .font2{
    opacity: 0;
    animation: fontChange .5s linear .5s forwards;
  }
  .font3{
    opacity: 0;
    animation: fontChange .5s linear .7s forwards;
  }
  .font4{
    opacity: 0;
    animation: fontChange .5s linear .9s forwards;
  }
  .font5{
    opacity: 0;
    animation: fontChange .5s linear 1.1s forwards;
  }

</style>
<body>
<div class="content">
  <div class="font">
    <div class="font2">恭</div>
    <div class="font3">喜</div>
    <div class="font4">发</div>
    <div class="font5">财</div>
  </div>
  <div class="bottom"></div>
  <div class="top"></div>
  <div class="bottom-box"></div>
  <div class="top-box"></div>
</div>
</body>
</html>
